<script setup lang="ts">
import {Ref, ref, watch} from "vue";

const count: Ref<number> = ref<number>(1)
const handleAddCount: () => void = (): void => {
  count.value++
}

/*
监听一个属性的变化
watch(count, (newValue:number, oldValue:number) => {
  console.log("新值是", newValue)
  console.log("旧值是", oldValue)
})
 */

/*
监听多个属性的变化
watch([count,max], (newValue:number, oldValue:number) => {
  console.log("新值是", newValue)
  console.log("旧值是", oldValue)
})
 */

/*
监听对象中某个属性的变化
watch(()=>person.name, (newValue:number, oldValue:number) => {
  console.log("新值是", newValue)
  console.log("旧值是", oldValue)
})
 */

/*
监听器的完整写法
watch(count, (newValue: number, oldValue: number) => {
  console.log("新值是", newValue)
  console.log("旧值是", oldValue)
}, {deep: true, immediate: true})
 */

watch(count, (newValue: number, oldValue: number) => {
  console.log("新值是", newValue)
  console.log("旧值是", oldValue)
})

</script>

<template>
  <div class="app">
    <h1>count的值是:{{ count }}</h1>
    <button @click="handleAddCount">count +1</button>
  </div>
</template>
